<template>
  <div class="app-container">
    <div class="custom_card_0" v-show="showSearch">
      <el-form
        :model="queryParams"
        ref="queryForm"
        :inline="true"
        label-width="80px"
      > <el-form-item label="品牌/车系" prop="brandName">
        <el-input
          v-model="queryParams.brandName"
          placeholder="请输入品牌/车系"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
        <el-form-item label="车型名称" prop="modelName">
          <el-input
            v-model="queryParams.modelName"
            placeholder="请输入车型名称"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="是否启用" prop="isAvailable">
          <el-select v-model="queryParams.isAvailable" @change="handleQuery">
            <el-option label="启用" :value="1"></el-option>
            <el-option label="停用" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属门店" prop="storeId">
          <el-select
            v-model="queryParams.storeId"
            placeholder="请选择所属门店"
            clearable
            size="small"
            filterable
            remote
          >
            <el-option
              v-for="(item, i) in storeList"
              :key="item.storeId"
              :label="item.storeName"
              :value="item.storeId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
            >搜索
          </el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
            >重置
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="custom_card">
      <el-row :gutter="10" class="mb10">
        <el-col :span="1.5">
          <el-button
            class="first-plain-btn"
            size="medium"
            icon="el-icon-plus"
            @click="handleAdd"
            v-hasPermi="['plan:plan:add']"
            >新增
          </el-button>
        </el-col>
        <right-toolbar
          :showSearch.sync="showSearch"
          @queryTable="getList"
        ></right-toolbar>
      </el-row>

      <el-table
        v-loading="loading"
        :data="charteredBusPlanList"
        @selection-change="handleSelectionChange"
        border
      >
        <el-table-column
          label="方案名称"
          align="center"
          prop="charteredBusPlanName"
          min-width="250"
          show-overflow-tooltip
        />

        <el-table-column
          label="车型名称"
          align="center"
          prop="modelInfo"
          min-width="280"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            {{ scope.row.modelInfo }}{{ scope.row.modelName }}
          </template>
        </el-table-column>

        <el-table-column
          label="用车时间类型"
          align="center"
          prop="useTimeType"
          min-width="120"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <dict-tag
              :options="dict.type.use_time_type"
              :value="scope.row.useTimeType"
            />
          </template>
        </el-table-column>

        <el-table-column
          label="车辆押金"
          align="center"
          prop="deposit"
          min-width="120"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            押金：¥{{ scope.row.deposit || 0 }}元
          </template>
        </el-table-column>
        <el-table-column
          label="车辆租金"
          align="center"
          prop="deposit"
          min-width="120"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            租金：¥{{ scope.row.rent || 0 }}元
          </template>
        </el-table-column>
        <el-table-column
          label="所属门店"
          align="center"
          prop="deptName"
          min-width="160"
          show-overflow-tooltip
        />
        <el-table-column
          label="创建时间"
          align="center"
          prop="createTime"
          min-width="160"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          label="所属租户"
          align="center"
          prop="tenantName"
          min-width="120"
          show-overflow-tooltip
        />
        <el-table-column
          label="是否启用"
          align="center"
          min-width="120"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <dict-tag
              :options="dict.type.sys_available"
              :value="scope.row.isAvailable"
            />
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
          fixed="left"
          width="200"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              @click="handleDetail(scope.row)"
              v-hasPermi="['plan:plan:edit']"
              >详情
            </el-button>
            <el-button
              size="mini"
              type="text"
              @click="handleUpdate(scope.row)"
              v-hasPermi="['plan:plan:edit']"
              >修改
            </el-button>
            <el-button
              v-if="scope.row.isAvailable === 0"
              size="mini"
              type="text"
              @click="handleAvailable(scope.row)"
              v-hasPermi="['plan:plan:edit']"
              >启用
            </el-button>
            <el-button
              v-if="scope.row.isAvailable === 0"
              size="mini"
              type="text"
              @click="handleDelete(scope.row)"
              v-hasPermi="['plan:plan:remove']"
              >删除
            </el-button>
            <el-button
              v-if="scope.row.isAvailable === 1"
              size="mini"
              type="text"
              @click="handleAvailable(scope.row)"
              v-hasPermi="['plan:plan:edit']"
              >停用
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
    <!-- 添加或修改车价主对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="open"
      width="1160px"
      :close-on-click-modal="false"
      destroy-on-close
      append-to-body
      @close="nowPlanId = null"
    >
      <MmvAdd
        :form="form"
        :planId="nowPlanId"
        ref="mmvAdd"
        v-if="open"
      ></MmvAdd>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm" :loading="addPlanLoading"
          >确 定
        </el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog
      title="详情"
      :visible.sync="openDetail"
      width="1160px"
      destroy-on-close
      append-to-body
      @close="nowPlanId = null"
    >
      <MmvDetail
        :form="form"
        :planId="nowPlanId"
        ref="mmvDetail"
        :key="openDetail"
      ></MmvDetail>
      <div slot="footer" class="dialog-footer">
        <el-button @click="openDetail = false">关闭</el-button>
      </div>
    </el-dialog>

    <el-drawer
      title="特殊租金"
      :visible.sync="drawerFlag"
      :direction="direction"
      size="30%"
      :before-close="handleClose"
    >
      <el-tabs v-model="specifiedType" type="card">
        <el-tab-pane label="节假日" name="first">
          <el-table :data="specifiedlist" v-loading="holidayLoading" border>
            <el-table-column label="价格名称" align="center" prop="holidayName"/>
            <el-table-column label="生效日期" align="center" prop="startTime">
              <template slot-scope="scope"> {{ scope.row.startTime }}至{{ scope.row.endTime }} </template>
            </el-table-column>
            <el-table-column label="单日价格（元）" align="center" prop="price"/>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="特殊时段" name="second">
          <el-table :data="specifiedlist2" v-loading="holidayLoading" border>
            <el-table-column label="价格名称" align="center" prop="holidayName"/>
            <el-table-column label="生效日期" align="center" prop="startTime">
              <template slot-scope="scope"> {{ scope.row.startTime }}至{{ scope.row.endTime }} </template>
            </el-table-column>
            <el-table-column label="单日价格（元）" align="center" prop="price"/>
          </el-table>
        </el-tab-pane>
      </el-tabs>



    </el-drawer>
  </div>
</template>

<script>
import MmvAdd from './add.vue'
import MmvDetail from './detail.vue'
import {
  delCharteredBusPlan,
  list,
  holidayBillingList,

  exportPlan,
  stopUsingEnabled,
} from '@/api/charteredBus/priceSetting'
import cloneDeep from 'lodash/cloneDeep'
import { getStoreList } from '@/api/car/model'

const form = {
  planId: '',
  planName: '',
  modelId: '',
  modelName: '',
  modelInfo: '',
  configurationId: '',
  isSetMeal: 2,
  standardVo: {
    mondayPrice: 0,
    tuesdayPrice: 0,
    wednesdayPrice: 0,
    thursdayPrice: 0,
    fridayPrice: 0,
    saturdayPrice: 0,
    sundayPrice: 0,
  },
  holidayVo: [],
  mealVo: [],
  chargeItemsVo: [],
}

export default {
  name: 'priceSet',
  dicts: ['store_type', 'sys_available', 'store_class', 'service_mode','use_time_type'],
  components: {
    MmvAdd,
    MmvDetail,
  },
  data() {
    return {
      openChange: false,
      openChange2: false,
      nowPlanId: null,
      openDetail: false,
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      holidayLoading: false,
      specifiedType: 'first',
      // 总条数
      total: 0,
      // 包车方案表格数据
      charteredBusPlanList: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      addPlanLoading: false,
      drawerFlag: false,
      direction: 'rtl',
      specifiedlist: [],
      specifiedlist2: [],
      holidayTotal: 0,
      holidayQueryParams: {
        pageNum: 1,
        pageSize: 10,
        planId: null,
      },
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        charteredBusPlanName: null,
        modelId: null,
        modelName: null,
        configurationId: null,
        isAvailable: null,
        deptId: null,
        storeId: null,
        tenantId: null,
        brandName:null
      },
      // 车辆列表表格数据
      storeList: [],
      // 表单参数
      form: cloneDeep(form),
      // 表单校验
      rules: {},
    }
  },
  created() {
    this.getList()
    getStoreList().then((response) => {
      this.storeList = response.data
    })
  },
  methods: {
    handleClose(done) {
      done()
    },
    specified(planId) {
      this.holidayQueryParams.planId = planId
      this.drawerFlag = true
      this.getHolidayBillingList()
    },
    getHolidayBillingList() {
      this.holidayLoading = true
      holidayBillingList(this.holidayQueryParams).then((response) => {
        let arr = response.rows
        this.specifiedlist=arr.filter(item=>item.holidayType==1)
        this.specifiedlist2=arr.filter(item=>item.holidayType==2)
        this.holidayLoading = false
      })
    },
    handleAvailable(row) {
      const id = row.charteredBusPlanId
      var tip = '停用'
      var isAvailable = 0

      if (row.isAvailable == 0) {
        tip = '启用'
        var isAvailable = 1
      }

      this.$modal
        .confirm('是否确认' + tip + '包车方案【' + row.modelInfo + '】？')
        .then(function () {
          var data = {
            charteredBusPlanId: id,
            isAvailable: isAvailable,
          }
          return stopUsingEnabled(data)
        })
        .then(() => {
          this.getList()
          this.$modal.msgSuccess('操作成功')
        })
        .catch(() => {})
    },
    /** 查询车价主列表 */
    getList() {
      this.loading = true
      list(this.queryParams).then((response) => {
        this.charteredBusPlanList = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    // 取消按钮
    cancel() {
      this.addPlanLoading = false
      this.open = false
      this.openChange = false
      this.openChange2 = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = cloneDeep(form)
      this.resetForm('form')
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.handleQuery()
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.planId)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      // this.reset()
      // this.open = true
      // this.title = '添加车价'
      // this.nowOrderNo = null
      this.$router.push({ path: '/charteredBus/priceSet/add' })
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.nowPlanId = row.charteredBusPlanId
      this.$router.push({ path: '/charteredBus/priceSet/edit?', query: { charteredBusPlanId :this.nowPlanId,storeName:row.deptName } })
    },
    /** 详情按钮操作 */
    handleDetail(row) {
      console.log("asdjhsafsa",row)
      this.nowPlanId = row.charteredBusPlanId
      console.log("穿的值",this.nowPlanId)
      this.$router.push({ path: '/charteredBus/priceSet/detail?', query: { charteredBusPlanId :this.nowPlanId,storeName:row.deptName } })
    },
    /** 提交按钮 */
    submitForm() {
      const form = this.$refs['mmvAdd'].submitForm()
      this.form = cloneDeep(form)
      console.log(form)
      if (this.form.planId) {
        this.addPlanLoading = true
        updatePlan2(this.form)
          .then((response) => {
            this.addPlanLoading = false
            this.$modal.msgSuccess('修改成功')
            this.open = false
            this.getList()
          })
          .catch((err) => {
            this.addPlanLoading = false
          })
      } else {
        this.addPlanLoading = true
        insertPlan(this.form)
          .then((response) => {
            this.addPlanLoading = false
            this.$modal.msgSuccess('新增成功')
            this.open = false
            this.getList()
          })
          .catch((err) => {
            this.addPlanLoading = false
          })
      }
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const planIds = row.charteredBusPlanId || this.ids
      this.$modal
        .confirm('是否确认删除数据项？')
        .then(function () {
          return delCharteredBusPlan(planIds)
        })
        .then(() => {
          this.getList()
          this.$modal.msgSuccess('删除成功')
        })
        .catch(() => {})
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams
      this.$modal
        .confirm('是否确认导出所有车价主数据项？')
        .then(() => {
          this.exportLoading = true
          return exportPlan(queryParams)
        })
        .then((response) => {
          this.$download.name(response.msg)
          this.exportLoading = false
        })
        .catch(() => {})
    },
  },
}
</script>
